/**
 * 树状图
 * @author zxy
 * @date  2021-01-06
 */
import React from 'react';
import PropTypes from 'prop-types';
import ReactEcharts from 'echarts-for-react';
import { Spin } from 'antd';
import { NoDataC } from '../../other';
import Color from '../../../css/colors';
import myStyle from './index.less';

class TreeChartsC extends React.Component {
  // 入参默认值设置
  static defaultProps = {
    height: '100%', // 图形高度默认为父节点的100%
    width: '100%', // 图形宽度默认为父节点的100%
    title: '',
    type: 1,
    data: undefined,
    colors: Color.echart, // 默认系统色
    depth: undefined, // 树图展开层级
    isPercent: false, // 默认不处理成百分比样式展示
  };

  // 返回option
  getOption = () => {
    const { title, data, colors, depth } = this.props;

    return {
      // 调色盘颜色列表
      color: colors,
      backgroundColor: Color.echartItems.bgColor, //echarts整个画布的背景色
      // 主标题和副标题
      title: {
        show: title ? true : false,
        left: '20',
        top: 0,
        text: title,
        textStyle: {
          color: Color.echartItems.title,
          fontSize: 14,
          fontWeight: 'normal',
          lineHeight: 20,
        },
      },
      // 提示信息
      tooltip: {
        show: false,
      },
      series: {
        type: 'tree',
        orient: 'vertical', // 纵向展示
        top: this.props.legendName ? 80 : 60,
        left: 15,
        bottom: 60,
        right: 15,
        initialTreeDepth: depth,
        label: {
          show: true,
          backgroundColor: Color.echartItems.treeSymbolBg,
          padding: 0,
          distance: this.props.legendName ? 10 : 0,
          position: this.props.legendName ? 'top' : 'bottom',
          verticalAlign: 'middle', // 垂直居中
          align: 'center', // 文字水平居中
          borderWidth: 0.2,
          borderColor: Color.echartItems.treeBorder,
          formatter: (params) => {
            let flag = data?.length ? data[0].value1 != undefined : false;
            if (!flag) {
              //只有一个value值
              let data = params.value;
              if (this.props.isPercent) {
                data = `${(params.value * 100).toFixed(2)}%`;
              }
              if (parseFloat(params.value) < 0) {
                return `{wenzi|${params.name}}\n{green|${data}}`;
              }
              return `{wenzi|${params.name}}\n{red|${data}}`;
            } else {
              //展示两个value值
              this.formDataFn(data, params.name); //取对应的value值
              let obj = this.tempData || {};
              if (this.props.isPercent) {
                obj.data0 = obj.data0 == 'N/A' ? obj.data0 : `${(obj.data0 * 100).toFixed(2)}%`;
                obj.data1 = obj.data1 == 'N/A' ? obj.data1 : `${(obj.data1 * 100).toFixed(2)}%`;
              }
              let myText =
                params.name.length > 6
                  ? `{wenzi0|${params.name}}\n{leftNumber0|${obj.data0}}\n{rightNumber0|${obj.data1}}`
                  : `{wenzi1|${params.name}}\n{leftNumber|${obj.data0}}\n{rightNumber|${obj.data1}}`;
              // if (parseFloat(params.value) < 0) {
              //   return `{wenzi|${params.name}}\n{green|${data}}`;
              // }
              // return `{wenzi|${params.name}}\n{red|${data}}`;
              return myText;
            }
          },
          textStyle: {
            fontSize: 14,
          },
          rich: {
            red: {
              color: Color.debtAndProfit.text[0],
              fontSize: 14,
              backgroundColor: Color.echartItems.treeNumberBg,
              padding: [5, 0, 5, 0],
            },
            green: {
              color: Color.debtAndProfit.text[1],
              fontSize: 14,
              padding: [5, 0, 5, 0],
            },
            wenzi: {
              color: Color.echartItems.treeText,
              fontSize: 14,
              backgroundColor: Color.echartItems.treeTextBg,
              padding: [6, 20, 6, 20],
            },
            wenzi1: {
              color: Color.echartItems.treeText,
              fontSize: 14,
              backgroundColor: Color.echartItems.treeTextBg1,
              padding: [6, 15, 6, 15],
              width: 80,
            },
            leftNumber: {
              color: Color.echartItems.treeNumberText,
              fontSize: 14,
              backgroundColor: Color.echartItems.treeNumberLeftBg,
              width: 80,
              borderWidth: 0,
              padding: [5, 15, 5, 15],
              // align:'left'
            },
            rightNumber: {
              color: Color.echartItems.treeNumberText,
              fontSize: 14,
              backgroundColor: Color.echartItems.treeNumberRightBg,
              padding: [5, 15, 5, 15],
              // width:'-150%',
              // borderColor:'transparent',
              borderWidth: 0,
              width: 80,
              // align:'left',
            },
            wenzi0: {
              color: Color.echartItems.treeText,
              fontSize: 14,
              backgroundColor: Color.echartItems.treeTextBg1,
              padding: [6, 20, 6, 20],
              width: 90,
            },
            leftNumber0: {
              color: Color.echartItems.treeNumberText,
              fontSize: 14,
              backgroundColor: Color.echartItems.treeNumberLeftBg,
              width: 90,
              borderWidth: 0,
              padding: [5, 20, 5, 20],
              // align:'left'
            },
            rightNumber0: {
              color: Color.echartItems.treeNumberText,
              fontSize: 14,
              backgroundColor: Color.echartItems.treeNumberRightBg,
              padding: [5, 20, 5, 20],
              // width:'-150%',
              // borderColor:'transparent',
              borderWidth: 0,
              width: 90,
              // align:'left',
            },
          },
        },
        data: data,
      },
    };
  };
  formDataFn = (data, name) => {
    data.map((item) => {
      if (item?.children?.length) {
        this.formDataFn(item.children, name);
      }
      if (item.name == name) {
        this.tempData = {
          data0: item.value,
          data1: item.value1,
        };
      }
    });
  };

  render() {
    const { data, width, height, legendName } = this.props;

    return (
      <div style={{ width: width, position: 'relative' }}>
        {legendName && data?.length > 0 ? (
          <div className={myStyle.legend}>
            <div>
              <span style={{ backgroundColor: Color.echartItems.treeNumberLeftBg }}></span>
              {legendName[0]}
            </div>
            <div>
              <span style={{ backgroundColor: Color.echartItems.treeNumberRightBg }}></span>
              {legendName[1]}
            </div>
          </div>
        ) : null}
        <Spin spinning={!data} tip='加载中...'>
          {data ? (
            data.length > 0 ? (
              <ReactEcharts
                option={this.getOption()}
                style={{ height: height, width: width }}
                // 是否不跟之前设置的 option 进行合并，默认为 false，即合并。
                notMerge={true}
              />
            ) : (
              <NoDataC height={height ? height : undefined} />
            )
          ) : (
            <div style={{ height: height, width: width }}></div>
          )}
        </Spin>
      </div>
    );
  }
}

/* 
备注：
  当data值为null或undefined时，显示loading状态
  当data值为空数组[]时，显示“暂无数据”
  当data值为有值的数组时，正常实现图形
*/
TreeChartsC.propsTypes = {
  height: PropTypes.oneOfType([
    // 图表高度（百分比、数值、auto(自动根据图例数量计算高度)）
    PropTypes.string,
    PropTypes.number,
  ]),
  width: PropTypes.oneOfType([
    // 图表宽度（百分比或数值）
    PropTypes.string,
    PropTypes.number,
  ]),
  title: PropTypes.string,
  type: PropTypes.number, // 1-展示名字+数据（正红负绿） -展示名字
  data: PropTypes.array, // 树形结构数据[name:'', value:'xx', children:[]]
  isPercent: PropTypes.bool, // 展示的数据是否处理成百分比、保留两位小数的模式
  legendName: PropTypes.array, // 展示两个数值的时候 的名称
};

export default TreeChartsC;
